<template>
	<el-table
			v-bind="$attrs"
	 		:data="tableData"  stripe border style="width: 100%;" :height="height" resizable 
      @selection-change="handleSelectionChange"
      @expand-change="handleExpandChange"
			@row-dblclick="handleRowDblClick"
			highlight-current-row
			@current-change="handleCurrentChange"
      >
		<template v-if="isShow">
			<el-table-column :type="type" v-if="type === 'expand'">
				<template #default="scope">
				
				<div style="padding: 20px; background-color: #F5F7FA; min-height:400px" >
						<ztable 
						:tableData='data[scope.$index]' 
						:strucs='columns'
						height='400'
						:border="false"
						:isshowOperation="true"
						>
						<template #default="slotData">
							<slot name="insideBtn" :insideData="slotData.rowData"></slot>
						</template>
						</ztable>
				</div>
			
				</template>
			</el-table-column>
			<el-table-column :type="type" v-if="type === 'selection'" ></el-table-column>
		</template>
		<template  v-for="struc in strucs" :key="struc.name">
			<el-table-column
				v-if="struc.listView"
				:fixed ="struc.fixed"
				:label="struc.viewName"
				:align="align"
				:prop="struc.name"
				:width="struc.columnWidth ? struc.columnWidth: 'auto'"
				>
				<!-- :width="struc.columnWidth ? struc.columnWidth: 'auto'" -->
				<template #default="scope">
					<div v-if="scope.row.type === 102">
							这里之后要放组件{{scope.row[struc.name]}}
					</div>
					<div v-else-if="struc.name === 'num'">
						<!-- 测试数据 -->
						<el-input-number
								class="num-btn-small"
								v-model="scope.row[struc.name]" 
								:max="10" 
								></el-input-number>
					</div>
					<template v-else-if="struc.name === 'customerName'">
						<div class="flex-img">
							<div class="avarat">
									<avaratImg :age="scope.row.age" :customerSex="scope.row.customerSex"></avaratImg>
							</div>
						
							<div class="personTo" @click="onPersonToDetail(scope.row)">
								<span class="personToDetail">{{scope.row[struc.name]}}</span>
								<span>
									<!-- 处理人物标签 -->
									<span class="icon" v-if="scope.row.customerInfo && scope.row.customerInfo.hasArrearsOrder">欠</span>
								</span>
							</div>
							
						</div>
					</template>
					<template v-else-if="struc.name === 'showStatus'">
						<div 
							:class="{
							'blue': scope.row.status == '待处理', 
							'orange': scope.row.status == '治疗中',
							'green': scope.row.status == '治疗完成',
							'grayCOlor': scope.row.status == '已离店',
							'gray': scope.row.status == '已结账',
							'blueColor': scope.row.status == '未到',
							}"
							
							>{{ setTodayStatusShow(scope.row[struc.name])}}</div>
					</template>
					<!-- 处理预约状态展示 -->
					<template v-else-if="struc.viewName === '预约状态'">
						<div class="status-color" :class="{
							'pinkStatus': scope.row.status == '新建',
							'greenStatus': scope.row.status == '完成',
							'grayStatus': scope.row.status == '取消',
							'blueStatus': scope.row.haveHistory,
						}">{{scope.row[struc.name]}}</div>
						
					</template>
					<template v-else-if="struc.name === 'chargeOperation'">
						
						<div title="收费" class="custom-btn-one" v-jurisdiction="'customer:order:save'"  @click="onImgClick( $event,'收费', scope.row)">
									<i class="iconfont icon-shoufeijilu" ></i>
								</div>
					</template>
					<template v-else-if="struc.name === 'canStatusUpdate'">
						<div v-jurisdiction="'sick:today:detailToStatus'">
							<div class="custom-dropdown" >
								<div class="dropdown-text">
									<!-- {{scope.row.showStatus}} -->
									<span v-if="scope.row.status === '未到' || scope.row.status === '预约' ||  scope.row.status === '未知'" @click="handleCommand('挂号', scope.row)">挂号</span>
									<span v-if="scope.row.showStatus === '待处理'" @click="handleCommand('开始治疗', scope.row)">开始治疗</span>
									<span v-if="scope.row.showStatus === '治疗中'" @click="handleCommand('治疗完成', scope.row)">治疗结束</span>
									<span v-if="scope.row.showStatus === '治疗完成' || scope.row.showStatus === '已结账'" @click="handleCommand('离店', scope.row)">离店</span>
									<span v-if="scope.row.showStatus === '已离店'" >离店</span>
								</div>

									<el-popover
										placement="bottom"
										ref="hidePopoverRef"
										:width="120"
										trigger="click"
										class="custom-style"
									>
										<template #reference>
											<div class="dropdown-select">
												<el-icon><CaretBottom /></el-icon>
											</div>
										</template>
										<div class="custom-dropdown-item" >
											<div class="dropdown-item " 
												v-for="i in scope.row[struc.name]" :key="i.name"
												:class="{'dropdown-disable': !i.canUse}"
												:isDisable="i.canUse"
												@click="handleDropdownClick(i, scope.row)"
												>{{i.name}}</div>
												<div class="dropdown-item" @click="handleClickReturnOpeation(scope.row)">
													<span>回退</span>
												</div>
										</div>
									</el-popover>
							</div>
						</div>
					</template>
					<template v-else-if="struc.name === 'appointmentOperation'">
						<div class="custom-group-btn">
							<abbr v-if="scope.row.status === '未到' || scope.row.status === '预约'"  title="修改预约"  style="text-decoration: none;" v-jurisdiction="'sick:subscribe:update'">
								<div class="custom-btn" @click="handleOperation('修改预约', scope.row)">
									<el-icon><edit /></el-icon>
								</div>
							</abbr>
							<abbr v-else  title="修改挂号"  style="text-decoration: none;" v-jurisdiction="'customer:record:detail:update'">
								<div class="custom-btn" @click="handleOperation('修改挂号', scope.row)">
									<el-icon><edit /></el-icon>
								</div>
							</abbr>
							<abbr title="取消预约"  style="text-decoration: none;" v-jurisdiction="'customer:subscribe:cancel'">
								<div class="custom-btn two-style-reset" :class="{'no-need': scope.row.status !== '未到' && scope.row.status !== '预约'}" @click="handleOperation('取消预约', scope.row)">
									<el-icon><close /></el-icon>
								</div>
							</abbr>
							<abbr title="创建新预约"  style="text-decoration: none;" v-jurisdiction="'customer:subscribe:add'" >
								<div class="custom-btn three-style-reset " @click="handleOperation('创建新预约', scope.row)">
									<el-icon><plus /></el-icon>
								</div>
							</abbr>
						</div>
					</template>
					<template v-else-if="struc.name === 'imageUrl'">
						<el-image
							style="width: 80px; height: 80px"
							:src="scope.row[struc.name]"
							fit="cover"
						>
						<template #error>
							<div class="image-slot">
								<el-icon><Picture /></el-icon>
							</div>
						</template>
						</el-image>
					</template>
					<template v-else-if="struc.name === 'charge'">
						<div class="gesture" v-jurisdiction="'customer:order:save'"  @click="onImgClick($event, '收费', scope.row)">
							<img :src="chargeIMG" alt="">
						</div>
					</template>
					<template v-else-if="struc.name === 'medical'">
						<div class="gesture" v-jurisdiction="'customer:sick:history:show'"  @click="onImgClick($event,'病历', scope.row)">
							<img :src="medicalIMG" alt="">
						</div>
					</template>
					<template v-else-if="struc.name === 'appointment'">
						<div class="gesture" v-jurisdiction="'work:doctor:subscribe'" @click="onImgClick($event, '预约', scope.row)">
							<img :src="appointmentIMG" alt="">
						</div>
					</template>
					<template v-else-if="struc.name === 'returnVisit'">
						<div class="gesture" v-jurisdiction="'work:doctor:access:visit'"  @click="onImgClick($event, '回访', scope.row)">
							<img :src="returnVisitIMG" alt="">
						</div>
					</template>
					<template v-else-if="struc.name === 'Treatment'">
						<div class="gesture" v-jurisdiction="'work:doctor:record:complete'" >
							<img class="grayImg" v-if="scope.row.status === '治疗完成' || scope.row.status === '已离店'" :src="TreatmentIMG" alt="">
							<img v-else  :src="TreatmentIMG" alt="" @click="onImgClick($event, '治疗完成', scope.row)">
						</div>
					</template>
					<template v-else-if="struc.name === 'total'">
						<div class="flex">
						<el-input class="mini-btn"></el-input>-
						<el-input class="mini-btn"></el-input>
						</div>
					</template>
					<div v-else>{{scope.row[struc.name]}}</div>
				</template>
			</el-table-column>
		</template>

		<template v-if="isshowOperation">
			<el-table-column  label="操作" align="center" :width="width">
				<template #default='scope'>
						<template v-for="(item, index) in scope.row.btnData" :key="item">
							
							<el-button
								@click="handleClick(item.name, scope.row, index)"
								type="text"
								class="operation"
								:disabled="item.disable"
							>
								{{ item.name }}
							</el-button>
						</template>
						<slot :rowData="scope.row" :index="scope.$index"></slot>
					
				</template>
			</el-table-column>
		</template>
	</el-table>

</template>

<script lang="ts">
import { CaretBottom, Edit, Picture, Close, Plus} from '@element-plus/icons-vue'
import { PropType, defineComponent, ref } from 'vue'
import { DataStruc } from "../../hook/datastruc";

import chargeIMG from "../../assets/image/work1.png"
import medicalIMG from "../../assets/image/work2.png"
import appointmentIMG from "../../assets/image/work3.png"
import returnVisitIMG from "../../assets/image/work4.png"
import TreatmentIMG from "../../assets/image/work5.png"

import avaratImg from "../../components/avatarImg/avatarImg.vue"

type OpearBtn ={
	id: string | number,
	name: string | number
}
export interface BtnData {
	name: string,
	func: Function,
	type?: string,
	isShow?: boolean,
	options?: OpearBtn[],
	disable?: boolean
}
// export interface ColumnsData {
// 	prop: string,
// 	lable: string,
// 	type?: boolean
// }
export default defineComponent({
	name:'ztable',
	props: {
		strucs: Array as PropType<DataStruc[]>,
		select:{
			type:Function,
		},
    expandChange: {
      type: Function,
    },
		tableData: {
			type: Array as PropType<DataStruc[]>,
			default: [],
			required: true,
		},
		// columns: {
		// 	type: Array as PropType<ColumnsData[]>,
		// 	required: true,
		// },
		align: {
			type: String,
			default: "center",
		},
		isShow: {
			type: Boolean,
			default: false,
		},
		btnData: {
			type: Array as PropType<BtnData[]>,
			default: [],
		},
		type: {
			type: String,
			default: "selection",
		},
		width: {
			type: String,
			default: '180'
		},
		data: {
			type: Array as PropType<any[]>,
			default: []
		},
		columns: {
			type: Array as PropType<DataStruc[]>
		},
		btnData1: {
			type: Array as PropType<BtnData[]>,
			default: [],
		},
		height: {
			type: String || Number,
			// default: '400'
		},
		isshowOperation: {
			type: Boolean,
			default: false
		}
	},
	components: {
		avaratImg,

		CaretBottom, Edit, Picture, Close, Plus
	},
	emits:['handleExpandChange', 'handleRowDblClick', 
	'handleSelectionChange', 'goCharge', 'goMedical', 
	'goAppointment', 'goReturnVisit','handleTreatment', 'clickCell',
	'handleChangeStatus', 'editRegister', 'editAppoiment', 'cancelAppoiment', 'addNewAppoiment',
	'handleRegister', 'startTreatment', 'overTreatment', 'leave', 'onToDetail',
	'handleClickReturnOpeation'
	],
	setup(props,{emit}) {
		const handleSelectionChange = (val: any) => {
			emit('handleSelectionChange', val)
		};
    const handleExpandChange = (row: object, expanded:any) => {
			emit('handleExpandChange', row, expanded)
    }
    const handleRowDblClick = (row: any, column:any, event:MouseEvent) => {
      emit('handleRowDblClick', row, column, event)
    }
		const handleClick = (name: string, val: any, index: any) => {
			for (const item of val.btnData) {
          if (item.name === name) {
					item.func(val, index);
				}
				
			}
		};

		// 单击变色
		const currentRow = ref(null)
		const handleCurrentChange = (val: any) => {
			currentRow.value = val
			emit('clickCell', val)
		}

		const setTodayStatusShow = (status: string) => {
			let msg = '';
			if(status) {
				console.log(status)
				msg = status

				if(status == '预约') {
					msg = '未确认'
				}

				if(status == '未到') {
					msg = '已确认'
				}
			}

			return msg
		}

		const toStatus = ref('')
		const handleChangeStatus = (val: string, RowDataID: number) => {
			emit('handleChangeStatus', val, RowDataID)
		}
		const hidePopoverRef = ref(null)
		const handleDropdownClick = (val: any, RowData: any) => {
			let canUse = val.canUse
			let value = val.value
			
			if(canUse) {
				if(val.name === '挂号') {
					handleCommand('挂号', RowData)
				}
				if(val.name === '开始治疗') {
					handleCommand('开始治疗', RowData)
				}
				if(value === '治疗完成') {
					handleCommand('治疗完成', RowData)
				}
				if(val.name === '离店') {
					handleCommand('离店', RowData)
				}
			}
		}

		const handleClickReturnOpeation = (RowData: any) => {
			let id = RowData.id
			emit('handleClickReturnOpeation',  id)
		}


		const handleCommand = (command: string, RowData: any) => {
			if(command === '挂号') {
				emit('handleRegister', RowData, '待处理')
			}
			if(command === '开始治疗') {
				emit('startTreatment', RowData, '治疗中')
			}
			if(command === '治疗完成') {
				emit('overTreatment', RowData, '治疗完成')
			}
			if(command === '离店') {
				emit('leave', RowData, '已离店')
			}
    }

		const changeStatus = (val: string, name: string ,data: object) => {
			for (const item of props.btnData) {
          if (item.name === name) {
					item.func(val,data);
				}
				
			}
		}

		// 图片点击
		const onImgClick = (e: MouseEvent, type: string, RowData: any) => {
			console.debug(RowData, e)
			if(type === '收费') {
				emit('goCharge', RowData)
			}
			if(type === '病历') {
				emit('goMedical', RowData)
			}
			if(type === '预约') {
				emit('goAppointment', RowData)
			}
			if(type === '回访') {
				emit('goReturnVisit', RowData)
			}
			if(type === '治疗完成') {
				emit('overTreatment', RowData, '治疗完成')
				// emit('handleTreatment', RowData)
			}
		}

		// 预约操作
		const handleOperation = (type: string, RowData: any) => {
				if(type === '修改挂号') {
					emit('editRegister', RowData)
				}
				if(type === '修改预约') {
					emit('editAppoiment', RowData)
				}
				if(type === '取消预约') {
					emit('cancelAppoiment', RowData)
				}
				if(type === '创建新预约') {
					emit('addNewAppoiment', RowData)
				}
		}

		const onPersonToDetail = (RowData: any) => {
			console.debug('执行')
			let {customerId} = RowData
			emit('onToDetail', customerId)
		}

		// // 列宽
		// const flexColumnWidth = (name, data) => {
		// 	// console.log(name,data)
		// }

		// const handleHeaderDragend = (newWidth, oldWidth, column, event) => {
		// 	console.log(column.id)
		// 	console.log(event.target.style.width = newWidth)
		// 	let col = document.querySelector(`#${column.id}`)
		// 	console.log(col)
		// 	console.log(newWidth, oldWidth, column, event)
		// 	event.target.style.width = newWidth
		// }
		return {
			handleSelectionChange,
			handleClick,
      handleExpandChange,
      // handleCellClick,
      // handleDblClick,
      // handleRowClick,
      handleRowDblClick,
			handleCurrentChange,
			handleChangeStatus,
			changeStatus,
			handleDropdownClick,
			handleClickReturnOpeation,
			handleCommand,
			toStatus,
			setTodayStatusShow,

			chargeIMG,
			medicalIMG,
			appointmentIMG,
			returnVisitIMG,
			TreatmentIMG,

			onImgClick,
			handleOperation,
			hidePopoverRef,
			onPersonToDetail,

			// flexColumnWidth,
			// handleHeaderDragend,
		};
	},
});
</script>

<style lang="scss" scoped>
.avatar {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex {
	display: flex;
}



.gesture {
	cursor: pointer;
}

.green {
	background-color: #2cc87e;
	color: white;
	padding: 12px 0px;
}
.blue {
	background-color: #007cdc;
	color: white;
	padding: 12px 0px;
}

.blueColor {
	background-color: #337ecc;
	color: white;
	padding: 12px 0px;
}
.orange {
	background-color: #fdc42c;
	color: white;
	padding: 12px 0px;
}

.gray, .grayCOlor {
	background-color: #a0a0a0;
	color: white;
	padding: 12px 0px;
}

.status-color {
	padding: 10px 15px;
	color: #fff;
}
.pinkStatus {
	background-color: #F56C6C;
}

.greenStatus {
	background-color: #67C23A;
}

.grayStatus {
	background-color: #909399;
}

.blueStatus {
	background-color: #409EFF;
}

.custom-group-btn {
	display: flex;
	justify-content: center;

	.custom-btn {
		width: 35px;
		height: 30px;
		border-radius: 4px 0 0 4px;
		border: 1px solid #ccc;
		text-align: center;
		display: flex;
		user-select: none;
		cursor: pointer;
		& > i {
			text-align: center;
			margin: auto;
			font-size: 16px;
			color: $primaryText;
			font-weight: 600;
		}

	}

	.custom-btn:hover {
		background: #DCDFE6;
	}
	
	.two-style-reset {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}

	.three-style-reset {
		border-radius: 0 4px 4px 0;
	}
}

.flex-layout {
	display: flex;
	justify-content: center;
}

.custom-btn-one {
	width: 35px;
	height: 30px;
	border-radius: 4px;
	border: 1px solid #ccc;
	text-align: center;
	// display: flex;
	user-select: none;
	cursor: pointer;
	& > i {
		text-align: center;
		margin: auto;
		font-size: 16px;
		color: $primaryText;
	}

	& > i::before {
		padding-right: 0;
		color: #2cc87e;
	}
}

.custom-btn-one:hover {
		background: #DCDFE6;
}

.custom-dropdown {
	height: 35px;
	display: flex;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;

	.dropdown-text {
		flex: 3;
		height: 35px;
		line-height: 35px;
		border: 1px solid #ccc;
		border-radius: 4px 0 0 4px;
		user-select: none;
	}
	.dropdown-text:hover {
		background: #eceef3;
	}

	.dropdown-select {
		flex: 1;
		height: 35px;
		border: 1px solid #ccc;
		border-left: 0;
		border-radius: 0 4px 4px 0;

		display: flex;
		align-items: center;
		justify-content: center;

		& > i {
			font-size: 18px;
			color: $mainColor;
		}

	}

	.dropdown-select:hover {
		background: #eceef3;
	}

	.custom-dropdown-item {
			
		}
}

.dropdown-item {
	line-height: 35px;
	cursor: pointer;
}
.dropdown-item:hover {
	background: #eceef3;
}

.dropdown-disable {
	user-select: none;
	cursor: not-allowed;
	color: #ccc;
	
}
.dropdown-disable:hover {
	background: white;
}

.custom-style {
	padding: 0;
}

.no-need {
	cursor: none;
	pointer-events: none;
	
	& > i::before {
		color: #ccc;
	}
}

.personTo {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	.personToDetail {
		color: $mainColor;
		user-select: none;

	}
}

.icon {
	font-size: 12px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	background-color: #f56c6c;
	color: #fff;
	border-radius: 50%;
}

.grayImg {
	-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
	filter: grayscale(100%);
} 


.flex-img {
	display: flex;
	// flex-direction: column;
	align-items: center;
	justify-content: center;

	.avarat {
		padding: 3px;
		& > span {
					margin: 2px;
					width: 40px;
					height: 40px;
					user-select: none;
				}
	}
}


</style>
